<template>
	<view class="box">
		<u-empty    v-if="list.length==0"   text="无罚款记录"    icon="https://cdn.uviewui.com/uview/empty/history.png">
		</u-empty>
		<view v-else class="content3" v-for="(item, index) in list" @click="navigateTo(item.id)">
			<u-row customStyle="margin-bottom: 10px">
			    <u-col span="8">
			        <view class="demo-layout bg-purple-light">
						<span>预约：{{item.appointmentTime}}</span>
					</view>
					<view>
						<h4>{{item.serveName}}</h4>
					</view>
			    </u-col>
			    <u-col span="4">
			        <view class="right" >
			        	<span>罚款</span>
			        </view>
			        <view class="right" >
						 <h4>{{(item.fine/100).toFixed(2)}}</h4>
			        </view>
			    </u-col>
				
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				pageVO:{
					pageNo: 1,
					pageSize: 20,
					technicianId:"", 
					receiveStatus:4,//技师接单状态（1未接单，2已接单，3服务中，4已完成，5拒绝接单，6取消）
					//orderStatus:1,//订单状态:1未接单 、2已接单、3服务中、4已经完成、5拒绝、6取消  
					sort:"desc",//排序
					fine:0,
				},
				list:[],
			}
		},
		computed: {
			//获取是否登录
			...mapState(['hasLogin','userInfo']) 
		},
		mounted() {
			this.showPage()
		},
		methods: {
			//查询今日入账记录
			showPage(){ 
				this.pageVO.technicianId=this.userInfo.id
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,this.pageVO, true)
				.then(res => { 
					console.log("罚款单",JSON.stringify(res))
					if(res.code!=0 )return 
					this.list=res.data.list
				}).catch(res => {
					uni.$u.toast(res)
				})
			},
			navigateTo(id){
				uni.navigateTo({
				   url: "/pagesB/serviceList/details?id="+id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.box{
	margin-top: 10rpx;
	padding: 0px 10px;
}
.content3{
	padding-bottom: 20rpx;
	border-radius: 5rpx;
	margin-top: 15rpx;
	padding-right: 20px;
	background-color: #fff;
	.demo-layout {
		    border-radius: 4px;
			//margin: 0px auto;
			margin-bottom: 10rpx;
			margin-top: 20rpx;
			
		}
	view{
		margin-left: 10px;
		//text-align: center;
	}		
	span{
		font-size: 12px;
		color: $font-color-secondary;
	}
	.right{
		text-align: right
		
	}
}
.fontweight{
	font-weight: 550;
}
</style>
